<template>
    <Head>
        <Title>{{ seoTitle }}</Title>
        <Meta name="description" :content="seoDescription" />
        <Meta name="keywords" :content="seoKeywords" />
    </Head>
    <div class="dir-top-nowrap gap body">
        <div class="head">
            <div class="container dir-left-nowrap main-between gap">
                <div class="box-grow-0 dir-left-nowrap gap l">
                    <div class="main-center cross-center sort" @click="() => order = '5555'"> 排序 </div>
                    <div class="dir-left-nowrap cross-center" style="gap: 10px;">
                        <img class="icon" src="/imgs/article/love.png" />
                        <div>COS分区-共 <span class="highlight">3000</span> 个作品</div>
                    </div>
                    <div class="dir-left-nowrap cross-center" style="gap: 10px;">
                        <img class="icon" src="/imgs/article/upload.png" />
                        <div>今日上传 <span class="highlight">3000</span> 个作品</div>
                    </div>
                </div>
                <div class="box-grow-1 dir-left-nowrap main-right cross-center r" style="gap: 40px;">
                    <!-- <div class="dir-left-nowrap cross-center gap search">
                        <input class="box-grow-1" type="text" placeholder="输入关键词 回车搜索" v-model="form.keywrod"
                            @keyup.enter.native="submitSearch">
                        <AppIcon class="box-grow-0" icon="Search" size="20" color="#aaaaaa" @click="submitSearch"></AppIcon>
                    </div> -->
                    <div class="dir-left-nowrap gap btn-group">
                        <div class="cross-center btn-item">
                            <AppIcon class="box-grow-0" size="16" icon="Mail"></AppIcon>
                            <div> 私信列表</div>
                        </div>
                        <div class="cross-center btn-item">
                            <AppIcon class="box-grow-0" size="16" icon="StarBorder"></AppIcon>
                            <div> 收藏列表</div>
                        </div>
                        <div class="cross-center btn-item success">
                            <AppIcon class="box-grow-0" size="16" icon="Add" color="#ffffff"></AppIcon>
                            <div> 发布列表</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dir-top-nowrap gap container content">
            <div class="list">
                <ArticleItem :item="article" v-for="(article, index) in list" :key="index"></ArticleItem>
            </div>
            <AppPagination :page="page" :page-size="size" :item-count="total"></AppPagination>
        </div>
    </div>
</template>

<script setup lang="ts">
import { AppIcon, ArticleItem, AppPagination, Head, Title, Meta } from "#components";
import { getArticleList } from "@/api";
import { Code, type ApiResultType } from "~~/global";

definePageMeta({
    key: (r) => r.fullPath
})

const page = useAppRouteQuery<string>('page', '1')
const type = useAppRouteQuery<string>('type', '')
const order = useAppRouteQuery<string>('order', '')
const size = ref(3)

type ResData = ApiResultType<typeof getArticleList>
const seoTitle = ref<ResData['seo_title']>('')
const seoDescription = ref<ResData['seo_description']>('')
const seoKeywords = ref<ResData['seo_keywords']>('')
const list = ref<ResData['list']>([])
const total = ref<ResData['total']>(0)
const loading = ref(false)

async function getList() {
    loading.value = true
    const res = await getArticleList({
        page: +page.value,
        size: size.value,
        type: type.value,
    }).finally(() => {
        loading.value = false
    })
    if (res.code != Code.success) {
        return console.log(res.msg);
    }
    list.value = res.data.list
    total.value = res.data.total
    seoTitle.value = res.data.seo_title
    seoDescription.value = res.data.seo_description
    seoKeywords.value = res.data.seo_keywords
}
await getList()

</script>

<style lang='scss' scoped>
.body {

    .head {
        padding: 30px 0;
        background-color: #fff;

        .l {
            .sort {
                width: 100px;
                height: 40px;
                background: linear-gradient(180deg, #ECF5FF 0%, #F3F9FE 100%);
                border-radius: 4px;
                font-size: 14px;
            }

            .icon {
                width: 16px;
                height: 16px;
            }

            .highlight {
                color: #F9688F;
            }
        }

        .r {
            .search {
                padding: 0 20px;
                width: 300px;
                height: 40px;
                font-size: 14px;
                font-weight: 400;
                color: #777777;
                background: #F5F5F5;
                border-radius: 8px;

                .app-icon {
                    cursor: pointer;
                }
            }

            .btn-group {
                .btn-item {
                    gap: 5px;
                    position: relative;
                    padding: 0 24px;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 8px;
                    border: 1px solid #999999;

                    &.success {
                        background-color: #F9688F;
                        color: #fff;
                        border: none;
                    }
                }
            }
        }
    }

    .content {
        .list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;

            .item {
                padding: 20px 14px;
                background-color: #fff;
            }
        }
    }

}
</style>